import styles from './Card.module.scss'
import { CSSProperties, FC } from 'react'
import { motion } from 'framer-motion'
import { motionEasing } from '@/config'
import { useColorVar, useStyles } from '@/hooks/styles'

interface ICard {
  style?: CSSProperties
  className?: string
  onClick?: () => void
}

export const Card: FC<ICard> = ({ style, className, onClick, children }) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  return (
    <motion.div
      {...styleClass(['layout'], {}, { style, className })}
      initial={{ boxShadow: '0px 8px 10px 0px rgba(10, 20, 69, 0.02)' }}
      whileHover={{
        boxShadow: '0px 8px 10px 0px rgba(10, 20, 69, 0.04)',
        y: -4,
      }}
      transition={{ ...motionEasing }}
      onClick={() => onClick && onClick()}
    >
      {children}
    </motion.div>
  )
}
